import React, { Component } from 'react';
import { Icon, Spin } from 'antd';
import 'styles/expense/telescopic.scss';
import 'styles/expense/expense-shrink.scss';

class TelescopicLeft extends Component {
  render() {
    const { children, leftWidth } = this.props;
    return (
      <section className="telescopic-left animated fadeIn" style={{ width: leftWidth }}>
        {children}
      </section>
    );
  }

}

class TelescopicRight extends Component {
  render() {
    const { children, leftWidth } = this.props;
    return (
      <section className="telescopic-right animated fadeIn" style={{ left: leftWidth }}>
        {children}
      </section>
    );
  }
}

class TelescopicShrink extends Component {
  render() {
    const { leftWidth } = this.props;
    return (
      <section
        className="expense-shrink"
        onClick={this.props.handleShrink}
        style={{
          left: leftWidth > 56 ? leftWidth - 20 : leftWidth,
          transform: leftWidth > 56 ? 'rotate(0)' : 'rotate(180deg)'
        }}
      >
        <Icon type="double-left"/>
      </section>
    );
  }
}

class Telescopic extends Component {
  render() {
    const { children, leftWidth, handleShrink, hasFooter, footer, loading } = this.props;
    return (
      <Spin spinning={loading}>
        <section className={this.classNames({ 'telescopic-footer': hasFooter, 'telescopic': true })}>
          {
            children.map(child => {
              if (typeof child !== 'string' && child !== null && child) {
                return React.cloneElement(child, { ...child.props, leftWidth });
              }
              return null;
            })
          }
          <TelescopicShrink
            leftWidth={leftWidth}
            handleShrink={handleShrink}
          />
          {
            hasFooter && footer
          }
        </section>
      </Spin>

    );
  }
}

Telescopic.TelescopicLeft = TelescopicLeft;
Telescopic.TelescopicRight = TelescopicRight;

Telescopic.defaultProps = {
  leftWidth: 500,
  handleShrink: () => {},
  hasFooter: false
};

export default Telescopic;

